<template>
    <div>
        <el-form :inline="true"  :model="userForm" class="demo-form-inline">
            <el-form-item label="人员工号">
                <el-input size="mini" v-model="userForm.empcode" placeholder="人员工号"></el-input>
            </el-form-item>
            <el-form-item label="人员名称">
                <el-input size="mini" v-model="userForm.empname" placeholder="人员名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="queryuser">查询</el-button>
            </el-form-item>
        </el-form>
        <el-button size="mini" @click="remove">确认移除</el-button>
        <el-table
            :data="tableData"
            height="250"
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column  prop="empcode" label="工号" ></el-table-column>
            <el-table-column prop="empname" label="姓名" ></el-table-column>
            <el-table-column prop="orgname" label="部门"></el-table-column>
        </el-table>
        <el-pagination
            small
            layout="sizes,prev, pager, next,total"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            @current-change="currentPageChange"
            @size-change="handleSizeChange"
            :total="page.total">
        </el-pagination>
    </div>
</template>
<script>
import request from "../../../../../utils/request.js";
export default {
    data() {
      return {
        userForm: {
            empcode:"",
            empname:""
        },
        page:{
            total:10,
            pageSize:5,
            curPageNum:1
        },
        tableData:[],
        curRoleRow:{},
        curUserRow:{},
        multipleSelection:[]
      }
    },
    methods:{
        currentPageChange(val){
            this.page.curPageNum = val;
            this.$options.methods.queryuser.bind(this)();
        },
        handleSizeChange(val){
            this.page.pageSize = val;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        queryuser(){
            const that = this;
            var queryData = {"curPageNum":this.page.curPageNum,"pageSize":this.page.pageSize,
                            "empname":this.userForm.empname,"empcode":this.userForm.empcode,"inroleid":this.curRoleRow.id};
            request.post("/system/query/queryUserDetailPage",queryData).then((res)=>{
                that.tableData = res.data.list;
                that.page.total = res.data.total;
            });
        },
        remove(){
            const that = this;
            console.log("multipleSelection",this.multipleSelection);
            request.post("/system/db/delRoleUser",this.multipleSelection).then((res)=>{
                if(res.data.retCode=="200"){
                    that.$Alert({message: res.data.message,type: 'success'});
                }else{
                    that.$Alert({showClose: true,message: res.data.message,type: 'error'});
                }
                that.$options.methods.queryuser.bind(this)();
            });
        }

    },
    mounted(){
        this.$bus.$on("loadUserList",(curRoleRow=>{
            this.curRoleRow = curRoleRow;
            this.$options.methods.queryuser.bind(this)();
        }));
    }
}
</script>